<template>
  <div id="map" style="mymap">
    <div >
      <button @click="change_img" class="btn">卫星图</button>
      <button @click="change_vec" class="btn">街道图</button>
      <button @click="change_ter" class="btn">地形图</button>
    </div>
  </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { TileSuperMapRest } from "@supermap/iclient-ol";
import XYZ from "ol/source/XYZ";
import "ol/ol.css"

export default {
  name: "supermap",
  data(){
    return{
      map: null,
      map_img:null,
      map_vec:null,
      map_ter:null,
    }
  },
  mounted(){
    //挂载地图
     this.mapinit();
  },
  methods:{
    //加载天地图和超图
    mapinit(){
      this.map = new Map({
        target: "map",
        //controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
        view: new View({
          center: [115.87,37.79],
          zoom: 11.5,
          projection: "EPSG:4326",
        })
      });

      //加载天地图的矢量图界面和标识
      var layer1= new TileLayer({
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
        })
      })

      var layer2= new TileLayer({
        source: new XYZ({
          url: 'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
        })
      })

      //var url = "http://192.168.32.187:8090/iserver/services/map-WYCSSJ0412/rest/maps/WYXDLTB"; //内网地址
      var url="http://123.56.110.82:8090/iserver/services/map-WYCSSJ0407/rest/maps/WYDLTB"; //外网地址
      //加载超图
      var layer3 = new TileLayer({
        source: new TileSuperMapRest({
          url: url,
          wrapX: true,
          transparent:true,
        }),
        projection: "EPSG:4326"
      });
      layer2.setOpacity(0.7);

      //图层加载到容器
      this.map.addLayer(layer1);
      this.map.addLayer(layer2);
      this.map.addLayer(layer3);
    },

    //天地图卫星图、天地图标识
    change_img (){
      var img = new TileLayer({
        source: new XYZ({
          url:  'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
        })
      });
      var name = new TileLayer({
        source: new XYZ({
          url:  'http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=406d2b04b58d2d49366047643dcc5f12'
        })
      });

      this.map.addLayer(img);
      this.map.addLayer(name);
    },
    //显示卫星图
    change_vec(){
      var map_cva= new TileLayer({
        source: new XYZ({
          url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_vec =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });

      this.map.addLayer(map_vec);
      this.map.addLayer(map_cva);
      //console.log(this.map.getLayers());
    },

    //显示矢量图
    change_ter(){
      var map_ter =new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      var map_cta =new TileLayer({
        source: new XYZ({
          url:  "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d"
        })
      });
      this.map.addLayer(map_ter);
      this.map.addLayer(map_cta);
    }
  }
}
</script>

<style scoped>
#map{
  height: 940px;
  width: 1920px;
  border: 2px solid  #ff0000;
}
</style>
